<!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../css/mui.min.css" rel="stylesheet" />
	<link href="../css/style.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="../css/workOrder.css" />
</head>

<body style="background-color: #f8fafc;">
	<div class="bottom-bow"></div>
	<div id="workOrder">
		<header class="mui-bar mui-bar-nav">

			<h1 class="mui-title" style="color: #fff;">工单</h1>
		</header>

		<div class="tab-list">
			<div class="list-item" v-for="(item,index) in tabList" @click="tabListClick(index)" :style="num==index?'color:#2A83FF;':''">{{item}}</div>
			<div class="tab-icon" :style="left"></div>
		</div>
		<div class="mui-content">
			<div id="refreshContainer" class="list-container mui-scroll-wrapper" style="top: 2.3466666667rem;">
				<div class="mui-scroll">
					<div class="list-item" v-for="item in dataList" @click="orderDetails(item)" v-tap="vuetouch" v-swipeleft="{fn:vuetouch,name:'left',rouID:item.rouID}"
					    v-swiperight="{fn:vuetouch,name:'right',rouID:item.rouID}">
						<div class="item-type" style=" box-shadow: 0 0 0 1px #2AC845; color: #2AC845;" v-if="item.rouType==1">例行任务</div>
						<div class="item-type" style="box-shadow: 0 0 0 1px #FF5D5D;color: #FF5D5D;" v-else-if="item.rouType==2">临时任务</div>
						<div class="item-type" style=" box-shadow: 0 0 0 1px #2A83FF; color: #2A83FF;" v-else-if="item.rouType==3">业主报修</div>
						<div class="item-type" style=" box-shadow: 0 0 0 1px #FFAC38; color: #FFAC38;" v-else-if="item.rouType==4">报事</div>
						<div class="item-title">{{item.rouName}}</div>
						<div class="item-desc">
							<span v-if="item.rouType!==4">{{item.rouDetails}}</span>
							<span>{{item.rouCD}}</span>
						</div>
						<!--<div class="item-designate" :style="item.state?'right: 0':'right: -150px'" @click.stop="designateClick">
								指派任务
							</div>-->
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="../js/mui.min.js"></script>
	<script src="../js/Width.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/silde.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/util.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
	<script type="text/javascript">
		mui.init({
			swipeBack: false, //启用右滑关闭功能
			pullRefresh: {
				container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
				down: {
					style: 'circle', //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
					auto: false, //可选,默认false.首次加载自动下拉刷新一次
					callback: refreshData //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
				},
				up: {
					height: 50, //可选.默认50.触发上拉加载拖动距离
					auto: true, //可选,默认false.自动上拉加载一次
					contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
					contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
					callback: loadMoreData //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
				}
			}
		});

		mui.plusReady(function () {
			if (!mui.os.android) {
				FastClick.attach(document.body);
			}
			var self = plus.webview.currentWebview();
			self.addEventListener('show', function () {
				loadMoreData()
			})
		})

		var workOrder = new Vue({
			el: '#workOrder',
			data: {
				num: 0,
				index: 0,
				left: 'left:8%;',
				tabList: [
					'待办事项',
					'审核事项',
					'完成事项'
				],
				dataList: []
			},
			created: function () {

			},
			methods: {
				tabListClick: function (id) {
					this.num = id
					this.index = 0
					console.log(this.num)
					this.dataList = []
					loadMoreData()
				},

				orderDetails: function (item) {
					var data = {
						rouID: item.rouID,
						rouType: item.rouType,
						gtaID: item.gtaID
					}
					if (this.num == 0) {
						data.stand = 0
					} else if (this.num == 2) {
						data.sate = 007
					}

					mui.openWindow({
						url: 'orderDetails/index.html',
						id: 'orderDetails/index.html',
						extras: data,
						waiting: {
							autoShow: false
						}
					});
				},

				vuetouch: function (s, e) { // 滑动事件
					var dataList = this.dataList
					dataList.forEach(function (son, index) {
						if (son.rouID == s.rouID) {
							if (s.name == 'left') {
								son.state = true
							} else if (s.name == 'right') {
								son.state = false
							}
						}
					})
					this.dataList = dataList
				},
				designateClick: function () { // 指派任务
					plus.nativeUI.confirm("您要指派任务吗？", function (e) {
						if (e.index == 0) {
							mui.alert('指派成功！')
						}
					});
				}

			}

		});

		window.addEventListener('refresh', function (e) { //执行刷新
			refreshData();
		});


		function refreshData() {
			var gtaState

			if (workOrder.num == 0) {
				gtaState = 1
				workOrder.left = 'left:7%;'
			} else if (workOrder.num == 1) {
				gtaState = 3
				workOrder.left = 'left:41%;'
			} else {
				gtaState = 4
				workOrder.left = 'left:74%;'
			}

			mui.post(httpUrl.testUrl + '/api/Gtasks/GetGtasks', {
				userID: plus.storage.getItem("userID"),
				gtaState: gtaState ? gtaState : 1,
				currentPage: 1,
				currentNumber: 10
			}, function (res) {
				if (res.code == 1001) {
					workOrder.dataList = []
					workOrder.dataList = workOrder.dataList.concat(addstate(res.data));
					mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
					mui('#refreshContainer').pullRefresh().refresh(true);
				} else {
					mui.toast('请求错误')
				}
			})
		}

		function loadMoreData() {
			workOrder.index++
				var gtaState

			if (workOrder.num == 0) {
				gtaState = 1
				workOrder.left = 'left:7%;'
			} else if (workOrder.num == 1) {
				gtaState = 3
				workOrder.left = 'left:41%;'
			} else {
				gtaState = 4
				workOrder.left = 'left:74%;'
			}

			mui.post(httpUrl.testUrl + '/api/Gtasks/GetGtasks', {
				userID: plus.storage.getItem("userID"),
				gtaState: gtaState ? gtaState : 1,
				currentPage: workOrder.index,
				currentNumber: 10
			}, function (res) {
				if (res.code == 1001) {
					workOrder.dataList = workOrder.dataList.concat(addstate(res.data));
					mui('#refreshContainer').pullRefresh().endPullupToRefresh(workOrder.dataList.length > res.data);
				} else {
					mui.alert('请求错误')
				}
			})
		}

		function addstate(Array) {
			Array.forEach(function (item, num) {
				item.state = false
			})
			return Array
		}
	</script>
</body>

</html>
